<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btnPost">发起POST请求</button>
    <button id="btnGet">发起GET请求</button>

    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnPost').addEventListener('click', async function () {
            //如果调用某个方法返回值是 Pormise实例 , 则前面可以添加 await
            //await 只能在被 asynx "修饰"的方法中
            const result = await axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: 'zs',
                    age: 18
                }
            })

            console.log(result);
        })
        document.querySelector('#btnGet').addEventListener('click', async function () {
            //解构赋值的时候, 使用 : 进行重命名
            //1.调用 axios 之后, 使用 async/await 进行简化
            //2. 使用解构赋值 ,从axios 封装的大对象中, 把 data属性解构出来
            //3.把解构出来的data属性, 使用冒号 进行重命名.一般都重命名为{ data: res }
            const { data: res } = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                params: {
                    id: 1
                }
            })
            console.log(res.data);
        })


        // $.ajax() $.get() $.post()
        //axios()  axios.get()  axios.post() axios.delete() axios.put()
    </script>
</body>

</html>